<template>
    <div class="page-header-index-wide setting_">
        <a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{'min-height': h+'px'}">
            <a-tabs
                    defaultActiveKey="base"
                    tabPosition="left"
            >
                <a-tab-pane tab="基本设置" key="base">
                    <BaseSettings></BaseSettings>
                </a-tab-pane>
                <a-tab-pane tab="安全设置" key="security">
                    <SecuritySettings></SecuritySettings>
                </a-tab-pane>
                <a-tab-pane tab="个性化" key="custom">
                    <CustomSettings></CustomSettings>
                </a-tab-pane>
            </a-tabs>
        </a-card>
    </div>
</template>

<script>
    import {PageView, RouteView} from '@/layouts'
    import BaseSettings from '@/edus/account/settings/BaseSetting'
    import SecuritySettings from '@/edus/account/settings/Security'
    import CustomSettings from '@/edus/account/settings/Custom'
    import {mixinDevice} from '@/utils/mixin.js'

    export default {
        components: {
            RouteView,
            PageView,
            BaseSettings,
            SecuritySettings,
            CustomSettings
        },
        mixins: [mixinDevice],
        props: ['h'],
        data() {
            return {
                // horizontal  inline
                mode: 'inline',

                openKeys: [],
                selectedKeys: [],

                // cropper
                preview: {},
                option: {
                    img: '/avatar2.jpg',
                    info: true,
                    size: 1,
                    outputType: 'jpeg',
                    canScale: false,
                    autoCrop: true,
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 180,
                    autoCropHeight: 180,
                    fixedBox: true,
                    // 开启宽度和高度比例
                    fixed: true,
                    fixedNumber: [1, 1]
                },

                pageTitle: ''
            }
        },
        created() {
            this.updateMenu()
        },
        methods: {
            callback(val) {
                console.log(val);
            },
            onOpenChange(openKeys) {
                console.log(openKeys)
                this.openKeys = openKeys
            },
            updateMenu() {
                const routes = this.$route.matched.concat()
                this.selectedKeys = [routes.pop().path]
            }
        },
        watch: {
            '$route'(val) {
                this.updateMenu()
            }
        }
    }
</script>

<style lang="less" >
    .setting_{
        .ant-tabs .ant-tabs-left-content{
            padding: 0 24px;
        }
    }

</style>
